import React, { useReducer, useEffect } from 'react'
import { initState, actions, reducer, getCheckAll, getShopList, getShow } from './reducer'
import { getCateList, reqDelCate, reqEditCate } from '../../request/api'
import './components/shop.css'

import { SwipeAction, List, Toast } from 'antd-mobile';
export default function Shop(props) {
    const [state, dispatch] = useReducer(reducer, initState)
    useEffect(() => {
        init()
    }, [])
    let init = () => {
        dispatch(actions.changeShow(true))
        let checkedArr = state.shopList.map(item => ({
            id: item.id,
            checked: item.checked
        }))
        getCateList().then(res => {
            if (res.code === 200) {
                let arr = res.list[1].content
                arr.forEach(item => item.checked = checkedArr.find((i) => i.id === item.id) ? checkedArr.find((i) => i.id === item.id).checked : false)
                dispatch(actions.changeShopList(arr))
            }
        })
    }
    let checkedAll = () => {
        let bool = !getCheckAll(state)
        dispatch(actions.changeCheckAll(bool))
        let arr = [...getShopList(state)]
        arr.forEach(item => item.checked = bool)
        dispatch(actions.changeShopList(arr))
    }
    let checkedOne = (index) => {
        let arr = [...getShopList(state)]
        arr[index].checked = !arr[index].checked
        dispatch(actions.changeShopList(arr))
        let bool = arr.every(item => item.checked)
        dispatch(actions.changeCheckAll(bool))
    }
    let delShop = (id) => {
        reqDelCate({ id }).then(res => {
            if (res.code === 200) {
                Toast.info(res.msg)
                init()
            }   
        })
    }
    let changeShop = (id, type, num) => {

        if (getShow(state)) {
            dispatch(actions.changeShow(false))
            console.log(num);
            if (type === 1) {
                if (num < 2) {
                    dispatch(actions.changeShow(true))
                    return
                }
            }
            reqEditCate({ id, type }).then(res => {
                if (res.code === 200) {
                    // Toast.info(res.msg)
                    init()
                }
            })
        }
    }
    let toOrder =()=>{
        let arr = state.shopList.filter(item=>item.checked)
        console.log(arr);
        if(arr.length === 0){
            Toast.info("请选择商品",1,()=>{},false)
            return
        }
        sessionStorage.setItem("OrderGoods",JSON.stringify(arr))
        props.history.push('/order')
    }
    let allprice = state.shopList.reduce((prve, item) => {
        return item.checked ? prve + item.price * item.num : prve
    }, 0)
    return (
        <div className="shop_wrap">
            <div className="shop_header">
                <span className="active_shop_span">商品</span>
                <span>评价</span>
                <span>详情</span>
                <span>推荐</span>
            </div>
            <List>
                {
                    state.shopList.map((item, index) => {
                        return <SwipeAction
                            style={{ backgroundColor: 'gray' }}
                            autoClose
                            key={item.id}
                            right={[
                                {
                                    text: '删除',
                                    // onPress: () => console.log('delete'),
                                    style: { backgroundColor: '#F4333C', color: 'white' },
                                    onPress: () => delShop(item.id)
                                },
                            ]}>
                            <List.Item>
                                <div className="lis">
                                    <div className="input">
                                        <input
                                            type="checkbox"
                                            name=""
                                            className="checkone"
                                            checked={item.checked}
                                            onChange={() => checkedOne(index)}
                                        />
                                    </div>
                                    <div className="img"><img src={item.img} alt="" /></div>
                                    <div className="text">
                                        <h3>{item.goodsname}</h3>
                                        {/* <h4>55555555</h4>
                                        <div className="ele">ele</div>
                                        <div className="new">new</div> */}
                                        <div className="price">
                                            <div className="price_l">
                                                <span style={{ marginRight: "0.2rem", color: "#ff6040" }}
                                                >￥{(item.price * item.num).toFixed(2)}</span>
                                                {/* <del style={{ color: "#aaa" }}>￥{item.}</del> */}
                                            </div>
                                            <div className="price_r">
                                                <span className="add" onClick={() => changeShop(item.id, 0, item.num)}>+</span>
                                                <span>{item.num}</span>
                                                <span className="sub" onClick={() => changeShop(item.id, 1, item.num)}>-</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </List.Item>
                        </SwipeAction>
                    })
                }
            </List>
            <div className="foot">
                <div className="foot_l">
                    <input
                        type="checkbox"
                        name=""
                        id="footchecked"
                        checked={getCheckAll(state)}
                        onChange={() => checkedAll()}
                    />
                    <label htmlFor="footchecked">全选</label>
                </div>
                <div className="sum">
                    <span style={{ fontSize: "0.25rem", fontWeight: "600" }}>合计</span>
                    <span>已免运费</span>
                </div>
                <div className="f_price">￥{allprice.toFixed(2)}</div>
                <div className="end" onClick={()=>toOrder()}>结算</div>
            </div>

        </div>
    )
}
